<template>
    <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="100px">
        <h2 style="text-align: center;">库管精确调拨</h2>
        <el-row>
            <el-col :span="6">
                <el-form-item label="单据主题" prop="documentName">
                    <el-input v-model="form.documentName" placeholder="请输入名称" clearable
                        style="width: 230px;"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="单据编号" prop="documentNumber">
                    <el-input v-model="form.documentNumber" placeholder="保存后自动生成" :disabled="true"
                        style="width: 230px;">
                    </el-input>
                </el-form-item>

            </el-col>
            <el-col :span="6">
                <el-form-item label="调拨日期" prop="dateTransfer">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.dateTransfer"
                        style="width: 230px;"></el-date-picker>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="6">
                <el-form-item label="库管人员" prop="warehouseStaff">
                    <el-input v-model="form.warehouseStaff" placeholder="请输入名称" clearable
                        style="width: 230px;"></el-input>
                </el-form-item>

            </el-col>
            <el-col :span="6">
                <el-form-item label="关联项目" prop="associate">
                    <el-input v-model="form.associate" placeholder="请输入名称" clearable style="width: 230px;"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-form-item label="调拨备注" prop="desc">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入养护原因"
                        v-model="form.desc">
                    </el-input>
                </el-form-item>

            </el-col>
        </el-row>
        <el-row>

            <el-col :span="6">
                <el-form-item label="选择调出仓库" prop="bringRepository">
                    <el-select v-model="form.bringRepository" placeholder="请选择对应仓库">
                        <el-option label="成品库(4)" value="成品库(4)"></el-option>
                        <el-option label="半成品库(7)" value="半成品库(7)"></el-option>
                        <el-option label="工程行业-原材料库" value="工程行业-原材料库"></el-option>
                        <el-option label="食品行业-成品库
" value="食品行业-成品库
"></el-option>
                    </el-select>
                </el-form-item>

            </el-col>
            <el-col :span="6">
                <el-form-item label="选择调出产品" prop="recallProduct">
                    <el-input v-model="form.recallProduct" placeholder="请输入名称" clearable
                        style="width: 230px;"></el-input>
                </el-form-item>

            </el-col>
        </el-row>
        <h2 style="text-align: center;">调拨明细</h2>
        <el-row>
            <el-col>
                <div>
                    <div>
                        <div>
                            <el-button size="small" @click="addRow">新增</el-button>
                        </div>
                        <!--设置的表单-->
                        <el-form :model="studentData" ref="data" label-width="auto">
                            <el-table border :header-cell-style="{ 'text-align': 'center' }"
                                :cell-style="{ 'text-align': 'center' }" :data="studentData" ref="table"
                                style="width: 100%">

                                <el-table-column align="center" label="产品名称">
                                    <template slot-scope="scope">
                                        <!--表格里面嵌套表单-->
                                        <el-form-item :prop="scope.$index + '.productName'"
                                            :rules="{ required: true, message: '产品名称不能为空', trigger: 'blur' }">
                                            <el-input v-model="studentData[scope.$index].productName" autocomplete="off"
                                                size="small"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="产品编号">
                                    <template slot-scope="scope">
                                        <el-form-item :prop="scope.$index + '.productCode'">
                                            <el-input v-model="studentData[scope.$index].productCode" autocomplete="off"
                                                size="small" type='number'></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="规格型号">
                                    <template slot-scope="scope">
                                        <el-form-item :prop="scope.$index + '.sku'">
                                            <el-input v-model="studentData[scope.$index].sku" autocomplete="off"
                                                size="small"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="单位">
                                    <template slot-scope="scope">
                                        <el-form-item :prop="scope.$index + '.unit'">
                                            <el-input v-model="studentData[scope.$index].unit" autocomplete="off"
                                                size="small"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="现有库存">
                                    <template slot-scope="scope">
                                        <el-form-item :prop="scope.$index + '.handInventory'"
                                            :rules="{ required: true, message: '数量不能为空', trigger: 'blur' }">
                                            <el-input v-model="studentData[scope.$index].handInventory"
                                                autocomplete="off" size="small"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="调拨数量">
                                    <template slot-scope="scope">
                                        <el-form-item :prop="scope.$index + '.allocationQuantity'"
                                            :rules="{ required: true, message: '数量不能为空', trigger: 'blur' }">
                                            <el-input v-model="studentData[scope.$index].allocationQuantity"
                                                autocomplete="off" size="small"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="出库仓库">
                                    <template slot-scope="scope">
                                        <el-form-item :prop="scope.$index + '.outboundWarehouse'">
                                            <el-input v-model="studentData[scope.$index].outboundWarehouse"
                                                autocomplete="off" size="small"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="入库仓库">
                                    <template slot-scope="scope">
                                        <el-form-item :prop="scope.$index + '.number'">
                                            <el-input v-model="studentData[scope.$index].number" autocomplete="off"
                                                size="small"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="批号">
                                    <template slot-scope="scope">
                                        <el-form-item :prop="scope.$index + '.batchNumber'">
                                            <el-input v-model="studentData[scope.$index].batchNumber" autocomplete="off"
                                                size="small"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="生产日期">
                                    <template slot-scope="scope">
                                        <el-form-item :prop="scope.$index + '.createTime'">
                                            <el-input v-model="studentData[scope.$index].createTime" autocomplete="off"
                                                size="small"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="有效日期">
                                    <template slot-scope="scope">
                                        <el-form-item :prop="scope.$index + '.validDate'">
                                            <el-input v-model="studentData[scope.$index].validDate" autocomplete="off"
                                                size="small"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>


                                <el-table-column align="center" label="包装方式">
                                    <template slot-scope="scope">
                                        <el-form-item :prop="scope.$index + '.packing'">
                                            <el-input v-model="studentData[scope.$index].packing" autocomplete="off"
                                                size="small"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="备注">
                                    <template slot-scope="scope">
                                        <el-form-item :prop="scope.$index + '.desc'">
                                            <el-input v-model="studentData[scope.$index].desc" autocomplete="off"
                                                size="small"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>

                                <el-table-column fixed="right" label="操作" width="100">
                                    <template slot-scope="scope">
                                        <el-button @click="handleDeleteRow(studentData[scope.$index])" type="text"
                                            size="small">删除</el-button>
                                    </template>
                                </el-table-column>


                            </el-table>
                            <br>
                            特别注意：<span>当同一产品分多批次入同一仓库时，如无批号、无序列号等信息区分，调拨时根据产品，会匹配出多行相同信息，
                                若无法精确区分，建议使用【库间汇总移货】功能。</span>
                            <br> <br>
                        </el-form>
                    </div>

                    <div slot="footer" class="dialog-footer" style="margin-bottom: 10px">
                        <el-button size="mini" @click="submit">提交</el-button>
                        <el-button size="mini" @click="resetForm()">重置</el-button>
                    </div>
                </div>
            </el-col>
            <el-col>
                <el-form>
                    <el-upload action="/your-upload-api-endpoint" :on-preview="handlePreview" :on-remove="handleRemove"
                        :file-list="fileList" list-type="text" multiple>
                        <el-button type="success">批量上传</el-button><br /><br />

                    </el-upload>
                    <el-table :data="tableData" style="width: 100%" border>
                        <el-table-column prop="name" label="文件名称" width="430"> </el-table-column>
                        <el-table-column prop="name" label="文件大小" width="200"> </el-table-column>
                        <el-table-column prop="date" label="上传人" width="200"> </el-table-column>
                        <el-table-column prop="name" label="上传时间" width="200"> </el-table-column>
                    </el-table>
                </el-form>
            </el-col>

            <el-col>
                <br><br>
                <br>
                <el-form-item style="float: right;">
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-col>
        </el-row>

    </el-form>

</template>
<script>
import Pagination from "@/components/Pagination";
import permission from "@/directive/permission/index.js";


export default {
    name: 'Maintenance',
    components: {
        Pagination
    },
    directives: {
        permission
    },
    data() {
        return {
            studentData: [],
            list: [],
            form: {
                documentName: "",
                documentNumber: "",
                dateTransfer: "",
                warehouse: "",
                warehouseStaff: "",
                associate: "",
                desc: "",
                bringRepository: "",
                recallProduct: "",
                createorupdatelibrary: []
            },
            defaultProps: {
                children: "children",
                label: "label",
                value: "value"
            },
            listLoading: true,
            formLoading: false,
            listQuery: {
                Filter: '',
                Sorting: '',
                SkipCount: 0,
                MaxResultCount: 10
            },
            formTitle: '',
            isEdit: false,
        };
    },
    computed: {},
    watch: {},
    //方法
    methods: {
        //新增产品养护
        onSubmit() {

            //数组与对象转换
            let preciselibrary = [];
            this.studentData.forEach(item => {
                preciselibrary.push({
                    productName: item.productName,
                    sku: item.sku,
                    unit: item.unit,
                    handInventory: item.handInventory,
                    allocationQuantity: item.allocationQuantity,
                    outboundWarehouse: item.outboundWarehouse,
                    incomingWarehouse: item.incomingWarehouse,
                    batchNumber: item.batchNumber,
                    createTime: item.createTime,
                    validDate: item.validDate,
                    packing: item.packing,
                    desc: item.desc
                });
            });
            this.form.createorupdatelibrary = preciselibrary;
            console.log(this.form);

            this.$axios.posts('/api/business/preciseLibrary/preciseLibrary-post', this.form).then(response => {
                this.formLoading = false;
                this.$notify({
                    title: '成功',
                    message: '新增成功',
                    type: 'success',
                    duration: 2000
                });
            }).catch(() => {
                this.formLoading = false;
            });




        },
        //新增行
        addRow() {
            let index = this.studentData.length;
            this.studentData.push({
                key: index,
                name: '',
                age: '',
                sex: '',
            });
        },

        //删除行
        //@param row
        handleDeleteRow(row) {
            let datas = this.studentData;
            for (var i = 0; i < datas.length; i++) {
                if (datas[i].key == row.key) {
                    datas.splice(i, 1);
                }
            }
        },

        //提交
        submit() {
            this.$refs["data"].validate(valid => {
                //valid为true，表示表单都已经验证通过，若为false，说明存在表单验证失败
                if (valid) {
                    save(this.studentData).then(response => {
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        });
                    });
                }
            });



        },

        //重置
        resetForm() {
            let datas = this.studentData;
            for (var i = 0; i < datas.length; i++) {
                datas[i].name = '';
                datas[i].age = '';
                datas[i].sex = '';
            }
        },
    }
}

</script>